<template>
    <a-modal
            :visible="userCommentVisible"
            title="评论"
            cancelText="取消"
            okText="提交"
            @cancel="cancel"
            @ok="handleSubmit"
    >
        <a-form :form="form" >
            <a-form-item label="服务" v-bind="formItemLayout" style="margin-top: 0; margin-bottom: 0">
                  <span>
                    <a-rate v-model="serviceValue" :tooltips="servicedesc" />
                    <span class="ant-rate-text">{{ value }}</span>
                  </span>
            </a-form-item>
            <a-form-item label="环境" v-bind="formItemLayout">
                  <span>
                    <a-rate v-model="environmentalValue" :tooltips="servicedesc" />
                    <span class="ant-rate-text">{{ value }}</span>
                  </span>
            </a-form-item>
            <a-form-item label="详细评价" v-bind="formItemLayout">
                <a-textarea
                        v-model="commentdetail"
                        :auto-size="{ minRows: 3}"
                />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
{ "id": 18,
"userId": 5,
"hotelId": 2,
"hotelName": "儒家酒店",
"checkInDate": "2020-05-24",
"checkOutDate": "2020-05-25",
"roomType": "BigBed",
"roomNum": 2, "peopleNum": 2,
"haveChild": false, "createDate": "2020-05-23",
"price": 398, "clientName": "测试二号", "phoneNumber": "12345678911", "orderState": "已取消" }
<script>
    import {mapGetters, mapMutations, mapActions} from 'vuex'
    export default {
        name: "userComment",
        props:['selectedOrder'],
        data() {
            return {
                formItemLayout: {
                    labelCol: {
                        xs: { span: 12 },
                        sm: { span: 6 },
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 16 },
                    },
                },
                serviceValue: 5,
                servicedesc: ['恶劣', '稍差', '一般', '满意', '非常棒'],
                environmentalValue: 5,
                commentdetail:"默认好评",
            }
        },
        methods: {
            cancel(){
               this.set_userCommentVisible(false);
            },
            handleSubmit(e) {
                e.preventDefault();
                if (this.commentdetail != "") {
                    const data = {
                        commentDetail: this.commentdetail,
                        orderId: this.selectedOrder.id,
                        rate: (this.serviceValue + this.environmentalValue) / 2
                    }
                    // console.log(data)
                    this.addComment(data);
                } else {
                    this.$message.error('请填写评论');
                }
            },
            ...mapActions([
                'addComment',

            ]),
            ...mapMutations([
                'set_userCommentVisible',

            ]),
        },
        computed: {
            ...mapGetters([
               'userCommentVisible'
            ]),
        }

    }
</script>

<style scoped>

</style>